<template>
	<div class="chat-warp">
		<div class="time" v-if="showTime($utils.timestampFormat(Date.parse( message.createTime)/1000))">
			{{ $utils.timestampFormat(Date.parse( message.createTime)/1000)}}
		</div>
		<div class="right-warp" v-if="isMe">
			<div class="txt" :id="'mark_'+ message.id" v-if="messageType === 'text' && message">
				{{ message.content }}
			</div>
			<div class="pic" :id="'mark_'+ message.id" v-if="messageType === 'image' && message">
				<image @click="handlerPreviewImage" :lazy-load="true" mode="aspectFill" :src="message.img" alt="">
			</div>
			<!-- 评论的商品 -->
			<div class="comment-note" v-if="messageType === 'information' && message">
				<div class="buy" @click="$navSkin.toProduct(message.informationId)">
					<div class="buy-left">
						<image class="buy-pic"
							v-if="message.firstFileSuffix !== 'png' && message.firstFileSuffix !== 'jpg' && message.firstFileSuffix !== 'jpge'"
							:src="message.firstCoverPath" mode="aspectFill"></image>
						<image class="buy-pic" v-else :src="message.firstPicturePath" mode="aspectFill">
						</image>
						<div class="pri-wrap">
							<span class="pri-title">{{message.title}}</span>
							<div class="pri-box">
								<span class="price" v-if="message.price">
									<span class="price-icon">￥</span>{{message.price}}
								</span>
								<span class="attr" v-if="message.freeShipping">包邮</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 红包 -->
			<div class="money" v-if="messageType === 'money' && message">
				<image :style="message.isReceive?'opacity: 0.4;':''" src="/static/icons/money.png" mode=""></image>
			</div>
			<div class="avatar">
				<image :src="avatar" alt="" mode="aspectFill" :lazy-load="true">
			</div>

		</div>

		<div class="left-warp" v-if="!isMe">
			<div class="avatar" @click="$navSkin.toPersonel(message.sendUserId)">
				<image :src="avatar" alt="" mode="aspectFill" :lazy-load="true">
			</div>
			<div class="txt" :id="'mark_'+ message.id" v-if="messageType === 'text' && message">
				{{ message.content }}
			</div>
			<div class="pic" :id="'mark_'+ message.id" v-if="messageType === 'image' && message">
				<image @click="handlerPreviewImage" :lazy-load="true" mode="aspectFill" :src="message.img" alt="">
			</div>
			<!-- 评论的商品 -->
			<div class="comment-note" v-if="messageType === 'information' && message">
				<div class="buy" @click="$navSkin.toProduct(message.informationId)">
					<div class="buy-left">
						<image class="buy-pic"
							v-if="message.firstFileSuffix !== 'png' && message.firstFileSuffix !== 'jpg' && message.firstFileSuffix !== 'jpge'"
							:src="message.firstCoverPath" mode="aspectFill"></image>
						<image class="buy-pic" v-else :src="message.firstPicturePath" mode="aspectFill">
						</image>
						<div class="pri-wrap">
							<span class="pri-title">{{message.title}}</span>
							<div class="pri-box">
								<span class="price" v-if="message.price">
									<span class="price-icon">￥</span>{{message.price}}
								</span>
								<span class="attr" v-if="message.freeShipping">包邮</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 红包 -->
			<div class="money" @click="openMoney" v-if="messageType === 'money' && message">
				<image :style="message.isReceive?'opacity: 0.4;':''" src="/static/icons/money.png" mode=""></image>
			</div>
		</div>
		<!-- 打开红包 -->
		<div v-if="openBagModelshow" class="open_rbag_model" @touchmove.prevent.stop>
			<image class="rbag_conbg" src="/static/icons/open_bag_bgImg.png"></image>
			<div class="rbag_conbg open_rbag_con">
				<div class="open_title">— 恭喜您获得 —</div>
				<div class="rbag_detail">
					<div class="open_money">
						<!-- 数字滚动 -->
						<div class="digital-scroll">
							<div class="digital digital-str">
								<!-- 符号显示 -->
								<div class="str-text">￥</div>
								<!-- 滚动的列表 -->
								<div class="scroll-num">
									<div class="tra-num">{{message.packetAmount || 0}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="open_tips">{{message.isReceive?'已经领取过了':'已存入个人账号'}}</div>
				<div class="lookbag_box">
					<div class="lookbag_btn">
						<div class="text" @click.stop="onConfirm()">{{message.isReceive?'确定':'收下'}}</div>
					</div>
				</div>
			</div>

		</div>
	</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				openBagModelshow: false,
			}
		},
		props: {
			isMe: {
				type: Boolean,
				default: () => {
					return true;
				}
			},
			messageType: {
				type: String,
				default: () => {
					return 'text';
				},
				validator: (value) => {
					return ['text', 'image', 'information', 'money'].indexOf(value) !== -1;
				}
			},
			avatar: {
				type: String,
				default: () => {
					return '';
				}
			},
			message: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		mounted() {
			// console.log("消息", this.message)
		},
		methods: {
			handlerPreviewImage() {
				uni.previewImage({
					urls: [this.message.img],
					current: this.message.img
				})
			},
			showTime(str) {
				if (str == '刚刚' || str == '1分钟前' || str == '2分钟前' || str == '3分钟前' || str == '4分钟前' || str == '5分钟前') {
					return false
				} else {
					return true
				}
			},
			openMoney() {
				this.openBagModelshow = true
			},
			onConfirm() {
				this.openBagModelshow = false

				// if (this.message.isReceive) {
				// 	return false
				// }

				this.$emit('hanlderMoney', this.message)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/style/def.scss';

	.chat-warp {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.right-warp {
			width: 100%;
			display: flex;
			justify-content: flex-end;

			.txt {
				max-width: 520rpx;
				border-radius: 4px;
				background: #FB8E26;
				box-sizing: border-box;
				padding: 6rpx 20rpx;
				font-size: 32rpx;
				line-height: 45rpx;
				color: #fff;
				position: relative;
				min-height: 60rpx;
				word-break: break-all;

				&:after {
					// content: '';
					// position: absolute;
					// width: 0;
					// height: 0;
					// top: 20rpx;
					// right: -27rpx;
					// border-top: 15rpx solid transparent;
					// border-right: 15rpx solid transparent;
					// border-bottom: 15rpx solid transparent;
					// border-left: 15rpx solid #FB8E26;
				}
			}

			.pic {
				width: 370rpx;
				border-radius: 8rpx;
				// background: #FB8E26;
				box-sizing: border-box;
				font-size: 0;
				position: relative;
				min-height: 58rpx;

				&:after {
					// content: '';
					// position: absolute;
					// width: 0;
					// height: 0;
					// top: 20rpx;
					// right: -27rpx;
					// border-top: 15rpx solid transparent;
					// border-right: 15rpx solid transparent;
					// border-bottom: 15rpx solid transparent;
					// border-left: 15rpx solid #FB8E26;
				}

				image {
					border-radius: 8rpx;
					width: 100%;
				}
			}

			.avatar {
				width: 60rpx;
				height: 60rpx;
				margin-left: 25rpx;
				font-size: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.left-warp {
			width: 100%;
			display: flex;
			justify-content: flex-start;

			.avatar {
				width: 60rpx;
				height: 60rpx;
				margin-right: 25rpx;
				font-size: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.txt {
				max-width: 520rpx;
				border-radius: 4px;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 6rpx 20rpx;
				font-size: 32rpx;
				line-height: 45rpx;
				color: #212121;
				position: relative;
				min-height: 60rpx;
				word-break: break-all;

				&:after {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					top: 20rpx;
					left: -28rpx;
					border-top: 15rpx solid transparent;
					border-right: 15rpx solid #FFFFFF;
					border-bottom: 15rpx solid transparent;
					border-left: 15rpx solid transparent;
				}
			}

			.pic {
				width: 520rpx;
				border-radius: 8rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				font-size: 0;
				position: relative;
				min-height: 58rpx;

				image {
					width: 100%;
					border-radius: 8rpx;
				}
			}
		}
	}

	.comment-note {
		.buy {
			width: 476rpx;
			background: #F4F4F5;
			border-radius: 18rpx;
			padding: 15rpx 20rpx;
			box-sizing: border-box;
			height: 192rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.buy-left {
				display: flex;

				.buy-pic {
					width: 160rpx;
					height: 160rpx;
				}

				.pri-wrap {
					margin-left: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.pri-title {
						// margin-left: 16rpx;
						width: 250rpx;
						margin-bottom: 16rpx;
						font-size: 32rpx;
						font-weight: normal;
						line-height: 32rpx;
						color: #000000;
						@extend .nowrap2;
					}

					.price {
						font-size: 42rpx;
						font-weight: normal;
						line-height: normal;
						color: #EC6A0A;

						.price-icon {
							font-weight: 400;
							font-size: 32rpx;
						}
					}

					.attr {
						margin-left: 5rpx;
						font-size: 32rpx;
						font-weight: normal;
						line-height: 32rpx;
						text-align: center;
						color: #666666;
					}
				}
			}
		}
	}

	.money {
		width: 433rpx;
		height: 163rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// 打开红包
	.open_rbag_model {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 1000;


		.rbag_conbg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 80%;
			height: 840rpx;
			margin: auto;
			z-index: 1001;
		}

		.open_rbag_con {
			z-index: 1002;

			.open_title {
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				font-size: 38rpx;
				letter-spacing: 2rpx;
				color: #e46965;
			}

			.rbag_detail {
				margin-top: 90rpx;

				.open_money {
					text-align: center;
					font-size: 80rpx;
					color: #c95948;
					font-weight: bold;
					display: flex;
					justify-content: center;
				}


			}

			.open_tips {
				text-align: center;
				font-size: 30rpx;
				color: #d26762;
				margin-top: 30rpx;
			}
		}

		// 打开红包
		.lookbag_box {
			margin-top: 200rpx;
			display: flex;
			justify-content: center;

			.lookbag_btn {
				width: 70%;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 32rpx;
				color: #c95948;
				letter-spacing: 2rpx;
				background-color: #ffd356;
				border-radius: 50rpx;
				box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, 0.2);
			}
		}
	}

	.digital-scroll {
		font-size: 68rpx;
		font-weight: bold;
		display: flex;
		align-items: center;

		// --var-item-h: 1em;
		--var-item-h: 80rpx;

		.digital {
			display: flex;
			justify-content: center;
			width: 0.6em; // 0.6em 是为了让文本间隔没那么宽
			height: var(--var-item-h);
			line-height: 1;
			color: #c95948;
			overflow: hidden;

			.scroll-num {
				width: inherit;
				height: inherit;
				// 文本竖直排列
				// writing-mode: vertical-rl;
				// text-orientation: upright;

				.tra-num {
					width: inherit;
					height: inherit;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 1s;
				}
			}
		}

		.digital-str {
			width: auto;

			.str-text {
				width: inherit;
				height: inherit;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.time {
		width: 100%;
		font-size: 20rpx;
		color: #000000;
		text-align: center;
		margin-bottom: 20rpx;
	}
</style>